<!-- !DOCTYPE 是为了防止老版本的浏览器出现兼容问题，导致无法识别出来是是HTML5版本的编码格式 -->
<!DOCTYPE html>
<!-- lang 是语言的英语缩写 en 是英语 zh-CN 是中文， 因为目前市面上编程语言的基础为英语 所有 lang 默认即是英语 防止出现编码错误 -->
<html lang="en">
<head>
    <!-- charset 是限制编码格式的一个属性 值可以是UTF-8 也可以是GBK 具体自行百度“编码格式” 编码格式发生改变时 它的文件会受影响，无法正常显示，会显示乱码（一大堆特殊符号） -->
    <meta charset="UTF-8">
    <title>QQ音乐</title>
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>


    <!-- 为什么会有那么多标签？ -->

    <!-- 每个标签作用是干什么的？  -->

    <!-- div标签主要是用来隔断代码的（它是一个盒模型标签） -->
    <!-- class 主要是用来声明当前盒模型内的代码作用，其次也是来写css样式表所用的类 -->


    <!-- header、section、footer 都是一个盒模型标签 -->
    <header>
        
        <div class="top">

            <div class="logo">

                <!-- 

                    相对路径
                    ./  是相对路径中的同级目录，
                    ../ 相对路径中的上级目录，

                    绝对路径
                    / 是绝对路径的意思一般应用于线上项目，寻找根目录的作用

                -->

                <img src="./images/logo.png" alt="">

            </div>
            <!-- nav 是一般用于连接合集使用的一个独有标签 它是a标签的上级标签所使用的标签 nav也是盒模型标签 -->
            <nav class="url-list">

                <!-- a标签是用来声明和跳转链接的独有标签，不是盒模型标签 href是链接地址，线上链接要填写http/https连接头 target是声明必须要在新页面打开窗口是所用的一个属性/值 -->
                <a href="javascript:;" class="active" target="_target">音乐馆</a>

                <a href="javascript:;">我的音乐</a>

                <a href="javascript::;">客户端</a>

                <a href="javascript:;">开放平台</a>

                <a href="javascript:;">VIP</a>

            </nav>

            <div class="search-login">

                <div class="search-box">
                    <input type="text" placeholder="搜索音乐、MV、歌单、用户">
                    <img src="./images/search.png" alt="">
                </div>

                <button>登录</button>
                <button>开通VIP</button>
                <button>充值</button>

            </div>

        </div>

        <nav class="bottom">

            <a href="javascript:;">首页</a>

            <a href="javascript:;">歌手</a>
            
            <a href="javascript:;">新碟</a>
            
            <a href="javascript:;">排行榜</a>
            
            <a href="javascript:;">分类歌单</a>
            
            <a href="javascript:;">电台</a>
            
            <a href="javascript:;">MV</a>
            
            <a href="javascript:;">数字专辑</a>
            
            <a href="javascript:;">票务</a>

        </nav>

    </header>

    <section>

        <div class="song-remmcoend">
            <h1>歌单推荐</h1>
            <div class="path-list">
                <span>为你推荐</span>
                <span>80年代</span>
                <span>KTV热歌</span>
                <span>网络歌曲</span>
                <span>官方歌单</span>
                <span>情歌</span>
            </div>
            <div class="song-list">
                <i class="iconfont icon-leftRight"></i>
                <div class="list">
                    <div class="list-cont">
                        <div class="img-box">
                            <img src="./images/imgs01.jpg" alt="">
                            <div class="icon">
                                <i class="iconfont icon-player"></i>
                            </div>
                        </div>
                        <h5><a href="javascript:;">90后:藏在mp3里共同美好的回忆</a></h5>
                        <p>播放量：2249.7万</p>
                    </div>
                    <div class="list-cont">
                        <div class="img-box">
                            <img src="./images/imgs02.jpg" alt="">
                            <div class="icon">
                                <i class="iconfont icon-player"></i>
                            </div>
                        </div>
                        <h5><a href="javascript:;">「独享时光」独处是一个人的清欢</a></h5>
                        <p>播放量：874.3万</p>
                    </div>
                    <div class="list-cont">
                        <div class="img-box">
                            <img src="./images/imgs03.jpg" alt="">
                            <div class="icon">
                                <i class="iconfont icon-player"></i>
                            </div>
                        </div>
                        <h5><a href="javascript:;">音乐随身听｜音乐是第二种语言</a></h5>
                        <p>播放量：3207.7万</p>
                    </div>
                    <div class="list-cont">
                        <div class="img-box">
                            <img src="./images/imgs04.jpg" alt="">
                            <div class="icon">
                                <i class="iconfont icon-player"></i>
                            </div>
                        </div>
                        <h5><a href="javascript:;">跑步热单：听完只想绕着操场跑200圈 ！</a></h5>
                        <p>播放量：9609.8万</p>
                    </div>
                    <div class="list-cont">
                        <div class="img-box">
                            <img src="./images/imgs05.jpg" alt="">
                            <div class="icon">
                                <i class="iconfont icon-player"></i>
                            </div>
                        </div>
                        <h5><a href="javascript:;">温柔和让步会让很多事变得简单</a></h5>
                        <p>播放量：92.2万</p>
                    </div>
                </div>
                <i class="iconfont icon-leftRight"></i>
            </div>
            <div class="round">
                <button class="active"></button>
                <button></button>
                <button></button>
            </div>
        </div>

        <div class="new-song song-remmcoend">
            <h1>新歌首发</h1>
            <div class="path-list">
                <button class="player">
                    <i class="iconfont icon-palyering"></i>
                    播放全部
                </button>
                <span>最新</span>
                <span>内地</span>
                <span>港台</span>
                <span>欧美</span>
                <span>韩国</span>
                <span>日本</span>
            </div>
            <div class="song-list">
                <i class="iconfont icon-leftRight"></i>
                <div class="list">
                    <div class="list-cont">
                        <div class="img-box">
                            <img src="./images/imgs06.jpg" alt="">
                            <div class="icon">
                                <i class="iconfont icon-player"></i>
                            </div>
                        </div>
                        <div class="song-cont">
                            <div class="songAndName">
                                <h4><a href="javascaript:;">干杯朋友</a></h4>
                                <p><a href="javascaript:;">费启鸣</a></p>
                            </div>
                            <p>03:18</p>
                        </div>
                    </div>
                    <div class="list-cont">
                        <div class="img-box">
                            <img src="./images/imgs07.jpg" alt="">
                            <div class="icon">
                                <i class="iconfont icon-player"></i>
                            </div>
                        </div>
                        <div class="song-cont">
                            <div class="songAndName">
                                <h4><a href="javascaript:;">四季三餐《日常幻想指南》电影主题曲</a></h4>
                                <p><a href="javascaript:;">黄子韬</a></p>
                            </div>
                            <p>03:30</p>
                        </div>
                    </div>
                    <div class="list-cont">
                        <div class="img-box">
                            <img src="./images/imgs08.jpg" alt="">
                            <div class="icon">
                                <i class="iconfont icon-player"></i>
                            </div>
                        </div>
                        <div class="song-cont">
                            <div class="songAndName">
                                <h4><a href="javascaript:;">征服</a></h4>
                                <p><a href="javascaript:;">阿云嘎</a></p>
                            </div>
                            <p>03:52</p>
                        </div>
                    </div>
                    <div class="list-cont">
                        <div class="img-box">
                            <img src="./images/imgs06.jpg" alt="">
                            <div class="icon">
                                <i class="iconfont icon-player"></i>
                            </div>
                        </div>
                        <div class="song-cont">
                            <div class="songAndName">
                                <h4><a href="javascaript:;">干杯朋友</a></h4>
                                <p><a href="javascaript:;">费启鸣</a></p>
                            </div>
                            <p>03:18</p>
                        </div>
                    </div>
                    <div class="list-cont">
                        <div class="img-box">
                            <img src="./images/imgs07.jpg" alt="">
                            <div class="icon">
                                <i class="iconfont icon-player"></i>
                            </div>
                        </div>
                        <div class="song-cont">
                            <div class="songAndName">
                                <h4><a href="javascaript:;">四季三餐《日常幻想指南》电影主题曲</a></h4>
                                <p><a href="javascaript:;">黄子韬</a></p>
                            </div>
                            <p>03:30</p>
                        </div>
                    </div>
                    <div class="list-cont">
                        <div class="img-box">
                            <img src="./images/imgs08.jpg" alt="">
                            <div class="icon">
                                <i class="iconfont icon-player"></i>
                            </div>
                        </div>
                        <div class="song-cont">
                            <div class="songAndName">
                                <h4><a href="javascaript:;">征服</a></h4>
                                <p><a href="javascaript:;">阿云嘎</a></p>
                            </div>
                            <p>03:52</p>
                        </div>
                    </div>
                    <div class="list-cont">
                        <div class="img-box">
                            <img src="./images/imgs06.jpg" alt="">
                            <div class="icon">
                                <i class="iconfont icon-player"></i>
                            </div>
                        </div>
                        <div class="song-cont">
                            <div class="songAndName">
                                <h4><a href="javascaript:;">干杯朋友</a></h4>
                                <p><a href="javascaript:;">费启鸣</a></p>
                            </div>
                            <p>03:18</p>
                        </div>
                    </div>
                    <div class="list-cont">
                        <div class="img-box">
                            <img src="./images/imgs07.jpg" alt="">
                            <div class="icon">
                                <i class="iconfont icon-player"></i>
                            </div>
                        </div>
                        <div class="song-cont">
                            <div class="songAndName">
                                <h4><a href="javascaript:;">四季三餐《日常幻想指南》电影主题曲</a></h4>
                                <p><a href="javascaript:;">黄子韬</a></p>
                            </div>
                            <p>03:30</p>
                        </div>
                    </div>
                    <div class="list-cont">
                        <div class="img-box">
                            <img src="./images/imgs08.jpg" alt="">
                            <div class="icon">
                                <i class="iconfont icon-player"></i>
                            </div>
                        </div>
                        <div class="song-cont">
                            <div class="songAndName">
                                <h4><a href="javascaript:;">征服</a></h4>
                                <p><a href="javascaript:;">阿云嘎</a></p>
                            </div>
                            <p>03:52</p>
                        </div>
                    </div>
                </div>
                <i class="iconfont icon-leftRight"></i>
            </div>
            <div class="round">
                <button class="active"></button>
                <button></button>
                <button></button>
                <button></button>
                <button></button>
                <button></button>
                <button></button>
                <button></button>
                <button></button>
            </div>
        </div>

    </section>
    
    <footer>

    </footer>
</body>
</html>